<template>
    <div class='body'>
        <div class="main">
            <div class="top">
            </div>
            <div class="bom" style="padding: 0 15px 50px;" v-if="tableData">

                <el-table :data="tableData" stripe style="width: 1060px">
                    <el-table-column align="center" prop="id" label="创建者id" width="80" />
                    <el-table-column align="center" prop="itemid" label="项目id" width="80" />
                    <el-table-column align="center" prop="itemtitle" label="投票标题" width="180"
                        :show-overflow-tooltip='true' />
                    <el-table-column align="center" prop="txt" label="投票介绍" width="180" :show-overflow-tooltip='true' />
                    <el-table-column align="center" prop="nruntime" label="开始时间" width="180" />
                    <el-table-column align="center" prop="nstoptime" label="结束时间" width="180" />
                    <el-table-column align="center" width="180" label="操作">
                        <template #default="scope">
                            <el-button
                                v-if="scope.row.thi >= scope.row.run && scope.row.thi <= scope.row.stop && !(can.includes(scope.row.itemid))"
                                size="small" @click="handleupEdit(scope.$index, scope.row)">

                                参与投票
                            </el-button>
                            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                                查看结果
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <el-pagination background @current-change="handleCurrentChange" v-model:current-page="currentPage4"
                    layout="prev, pager, next" :total="cons" />
            </div>
        </div>
    </div>
    <!-- 抽屉 -->
    <el-drawer v-model="drawer" title="投票" direction="rtl" :before-close="handleClose">
        <span>你好, {{ imgs.name }}!</span>
        <p style="text-align: center;font-size: 25px;margin: 15px 0;">{{ updata.itemtitle }}</p>
        <p style="text-align: center;margin: 15px 0;">{{ updata.txt }}</p>
        <el-radio-group v-model="updata.usetxt" class="ml-4 ctbox">
            <el-radio v-for="item in useitemlist.data" :value="item.txt" size="large" style="width: 75px;height: 100px;">
                <img :src="item.img" alt="" style="width: 75px;height: 75px;">
                <span>{{ item.txt }}</span>
            </el-radio>
        </el-radio-group>
        <el-button type="success" @click="tj">提交</el-button>
    </el-drawer>
    <!-- 抽屉2 -->
    <el-drawer v-model="drawer2" title="投票" direction="rtl" :before-close="handleClose1">
        <span>你好, {{ imgs.name }}!</span>
        <p style="text-align: center;font-size: 25px;margin: 15px 0;">{{ updata.itemtitle }}</p>
        <p style="text-align: center;margin: 15px 0;">{{ updata.txt }}结果</p>
        <div ref="dom1" style="width: 100%;height: 400px;"></div>

    </el-drawer>
</template>
<script setup lang='ts'>
import { useitem, itemdata, xuanitem, toudata } from '@/api/info/index'
import moment from 'moment';
import { useCountStore } from "@/store/count";
import { ElMessage, ElMessageBox } from 'element-plus'
import * as echarts from 'echarts';

const open4 = (data?: any) => {
    if (data) {
        ElMessage.error(data)
    } else {
        ElMessage.error('Oops, this is a error message.')
    }
}
const open2 = (data?: any) => {
    if (data) {
        ElMessage({
            message: data,
            type: 'success',
        })
    } else {
        ElMessage({
            message: 'Congrats, this is a success message.',
            type: 'success',
        })
    }

}
const drawer = ref(false)
const qxstore = useCountStore()
let tableData = ref()
let can = ref([0])
let imgs = ref()
onMounted(() => {
    setTimeout(() => {
        canitems(1, 10, qxstore.id)
    }, 200);

    // 获取当前时间
    // const loginTime1 = new Date();
    // let aaa = moment(loginTime1).format('YYYY-MM-DD HH:mm:ss');
    // console.log("aaaa", aaa);


    // 测试base64存储
    toudata().then((res: any) => {
        console.log("imgs", res);
        imgs.value = res.data[0]
        if (res.data[0].can) {
            can.value = JSON.parse(res.data[0].can)
        }

    })

})

// 获取投票列表
let canitems = (pageNumber: any, size: any, id?: any) => {
    console.log(qxstore.id);

    itemdata({
        pageNumber,
        size
    }).then((res: any) => {
        console.log('日志', res)
        res.data.data.forEach((item: any) => {
            item.nruntime = moment(item.runtime).format('YYYY-MM-DD HH:mm:ss'); // 格式化为"年-月-日 时:分:秒"
            item.nstoptime = moment(item.stoptime).format('YYYY-MM-DD HH:mm:ss'); // 格式化为"年-月-日 时:分:秒"
            item.run = new Date(item.runtime).getTime()
            item.stop = new Date(item.stoptime).getTime()
            item.thi = new Date().getTime()
        });
        tableData.value = res.data.data.reverse()
        cons.value = res.data.conts
        console.log(tableData.value[0]);

    })

}

// 分页
let cons = ref()
const currentPage4 = ref(1)


const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    canitems(val, 10, qxstore.id)
}
// 查看结果
const drawer2 = ref(false)
let name = ref()
let ps = ref()
const handleEdit = (index: number, row: any) => {
    console.log(index, row)
    updata.itemid = row.itemid
    updata.itemtitle = row.itemtitle
    updata.txt = row.txt
    xuanitem({ itemid: row.itemid }).then(res => {
        console.log("rssss", res);

        option.xAxis[0].data = res.data.data.map(item => item.txt)
        option.series[0].data = res.data.data.map(item => item.chang)
        console.log("选项item", name.value);

        drawer2.value = true
        setTimeout(() => {
            var myChart = echarts.init(dom1.value);
            myChart.setOption(option);
        }, 50);
    })


}
const handleClose1 = (done: () => void) => {
    ElMessageBox.confirm('确定关闭？')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}
// 展示数据
const dom1 = ref()

let option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '票数',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220]
        }
    ]
};



//  抽屉+投票
let updata = reactive({
    itemid: "",
    id: qxstore.id,
    txt: "",
    usetxt: "",
    itemtitle: ""
})
let useitemlist = ref()
const handleupEdit = (index: number, row: any) => {
    console.log(index, row)
    updata.itemid = row.itemid
    updata.itemtitle = row.itemtitle
    updata.txt = row.txt
    xuanitem({ itemid: row.itemid }).then(res => {
        console.log("选项item", res);
        useitemlist.value = res.data

        drawer.value = true

    })
}
const handleClose = (done: () => void) => {
    ElMessageBox.confirm('确定取消投票？')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}
let tj = () => {
    console.log(1231231231);
    useitem({
        itemid: updata.itemid,
        id: qxstore.id,
        usetxt: updata.usetxt
    }).then(res => {
        console.log(res);
        drawer.value = false
        open2(res.data.msg)
    })

}
// 数据显示

</script>
<style  lang='less'>
.body {
    background-color: rgb(245, 249, 250);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    .main {
        width: 80%;
        height: 95%;
        // background-color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;


        .top {
            width: 100%;
            height: 10%;
            background-color: #fff;
            box-sizing: border-box;
            padding: 10px 0px 10px 25px;
            display: flex;
            align-items: center;
        }

        .bom {
            width: 100%;
            height: 89%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background-color: #fff;
            box-sizing: border-box;
            padding-top: 25px;
            padding-left: 10px;
        }
    }
}

.ctbox {
    width: 100%;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    text-align: center;

    label {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    label * {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}
</style>